<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="$2674555">
            <template slot="charts">
                <span>&nbsp;&nbsp;周同比&nbsp;&nbsp;56.67%</span>
                <span>&nbsp;&nbsp;日同比&nbsp;&nbsp;50.87%</span>
            </template>
            <template slot="footer">
              <span>日销售额&nbsp;&nbsp;￥3421</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="12892349965次">
            <template slot="charts">
              <LineChart></LineChart>
            </template>
            <template slot="footer">
              <span>日访问量&nbsp;&nbsp;1663</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="546236笔">
            <template slot="charts">
              <BarCharts></BarCharts>
            </template>
            <template slot="footer">
              <span>日转化率&nbsp;&nbsp;30%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <ProcessCharts></ProcessCharts>
            </template>
            <template slot="footer">
              <span>&nbsp;&nbsp;周同比&nbsp;&nbsp;56.67%</span>
              <span>&nbsp;&nbsp;日同比&nbsp;&nbsp;50.87%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "@/views/dataset/Card/Detail/index.vue";
import LineChart from "@/views/dataset/Card/lineChart/index.vue";
import BarCharts from "@/views/dataset/Card/barCharts/index.vue";
import ProcessCharts from "@/views/dataset/Card/processCharts/index.vue";
export default {
  name: "index",
  components: {
    Detail,
    LineChart,
    BarCharts,
    ProcessCharts,
  }
}
</script>

<style scoped>

</style>
